<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }


    .box {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 0 auto 200px;

        /*box-sizing: border-box;*/
        padding: 10px;
        border: 15px solid red;
    }
</style>
<body>

<div class="box" style="width: 200px"></div>
</body>

<script>
    var box = document.querySelector('.box');

    // 1.offset可以得到任意样式表中的样式值, 而style只能得到 行内样式表 中的样式值
    console.log(`box.style.width: ${box.style.width}`)  // box.style.width:
    console.log(`box.offsetWidth: ${box.offsetWidth}`)  // box.offsetWidth: 250

    // 2.offset获取的数值无单位, 而style获取的是有单位

    // 3.offsetWidth包含 padding + border + width, 而style.with不包含padding和border的值

    // 4.offsetWidth等属性是只读, 不能修改. 而 style.width是可读写的


    // 总结: 我们想要获取元素大小位置, 用offset更合适; 想给元素更改值, 需要用style改变
</script>
</html>
